<template>
  <div class="routing-inspection">
    <div class="main-content">
      <div class="content-wrap">
        <div class="search-wrap">
          <el-form :inline="true" :model="params">
            <el-row>
              <el-form-item label="策略名称">
                <el-input v-model="params.s"></el-input>
              </el-form-item>
              <el-form-item label="计划类型">
                <el-select
                  class="sel-width"
                  v-model="params.value"
                  placeholder="请选择"
                  clearbaler
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-col :span="7">
                <div class="btn-wrap">
                  <el-button :icon="Search" type="primary" @click="getList"
                    >查询</el-button
                  >

                  <button class="add" @click="handleAdd">
                    <Svg
                      name="add"
                      color="#fff"
                      width="20"
                      height="20"
                      style="margin-top: 5px"
                    ></Svg>
                    <span>新增</span>
                  </button>
                  <button class="edit">
                    <Svg
                      name="edit"
                      color="#fff"
                      width="20"
                      height="25"
                      style="margin-top: 3px"
                    >
                    </Svg>
                    <span>编辑</span>
                  </button>
                  <button class="del">
                    <img src="./images/del-icon.png" alt="" />
                    <span>删除</span>
                  </button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="table-data">
          <el-table class="table-height" :data="tableData">
            <el-table-column type="selection" align="center"> </el-table-column>
            <el-table-column
              v-for="item in tableItem"
              :prop="item.prop"
              :label="item.label"
              align="center"
            >
              <template #default="{ row }" v-if="item.label === '操作'">
                <div class="btn-wrap">
                  <button class="detail" @click="handleNodeClick(row)">
                    详情
                  </button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            v-model:currentPage="params.currentPage"
            :total="total"
            v-model:page-size="params.pageSize"
          />
        </div>
      </div>
    </div>
    <Add :showDiaLog="showAddDeviceDialog" @close="close" @save="save" />
    <Dialog
      headerName="新增"
      diaTop="5"
      diaWidth="55"
      footerPadding="0 220"
      v-model:showDialog="addDialog"
    >
      <template #content>
        <div class="dialog-add-content dia-content">
          <el-form :model="diaParams" label-width="110px">
            <el-row :gutter="0">
              <el-col :span="12">
                <el-form-item label="策略名称">
                  <el-select
                    class="sel-width clear-bgc"
                    v-model="params.value"
                    placeholder="请选择"
                    clearbaler
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="策略类型" label-width="130px">
                  <el-select
                    class="sel-width clear-bgc"
                    v-model="params.value"
                    placeholder="请选择"
                    clearbaler
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row>
              <el-col :span="12">
                <el-form-item label="运行模式">
                  <el-select
                    class="sel-width clear-bgc"
                    v-model="params.value"
                    placeholder="请选择"
                    clearbaler
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设定温度" label-width="130px">
                  <el-select
                    class="sel-width clear-bgc"
                    v-model="params.value"
                    placeholder="请选择"
                    clearbaler
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划类型">
                  <el-radio-group v-model="diaForm.ss">
                    <el-radio value="1" label="1">定时计划</el-radio>
                    <el-radio value="2" label="2">周期计划</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="周期使能"
                  class="center-align"
                  label-width="130px"
                >
                  <div class="week-wrap">
                    <el-checkbox-group
                      v-model="params.checkedCities"
                      @change="handleCheckedCitiesChange"
                    >
                      <el-checkbox
                        v-for="week in cities"
                        :key="week.key"
                        :label="week.label"
                        :value="week.value"
                      >
                        {{ week.label }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="执行操作">
                  <el-select
                    class="sel-width clear-bgc"
                    v-model="params.value"
                    placeholder="请选择"
                    clearbaler
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="照明类型" label-width="130px">
                  <el-select
                    class="sel-width clear-bgc"
                    v-model="params.value"
                    placeholder="请选择"
                    clearbaler
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="执行时间">
                  <el-time-picker
                    v-model="params.value1"
                    class="clear-bgc"
                    is-range
                    value-format="HH:mm:ss"
                    arrow-control
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设置亮度" label-width="130px">
                  <div class="slider">
                    <el-slider v-model="params.value" show-input />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="具体时间">
                  <el-time-picker
                    v-model="params.value1"
                    class="clear-bgc"
                    is-range
                    arrow-control
                    value-format="HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12"> </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div
                  class="add-device-wrap"
                  :style="[bgcShow ? 'background:none' : 'none']"
                >
                  <ul class="ul">
                    <li v-for="item in 1">
                      <span>201房间照明</span>
                      <img src="./images/del-close.png" alt="" />
                    </li>
                  </ul>
                  <div class="add-device clear-bgc" @click="addDevice">
                    +&nbsp;添加设备
                  </div>
                  <!-- + 继续添加设备 -->
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import Add from "./components/add";

let showAddDeviceDialog = ref(false);
let addDialog = ref(false);
let selVal = ref(1);
let diaForm = reactive({});
let params = reactive({ checkedCities: [], value1: [], value: [] });
let diaParams = reactive({});
let diaTotal = ref(1);
let options = [{ label: 1, value: 1 }];
let handleCheckedCitiesChange = () => {};
let cities = ref([
  {
    key: 1,
    label: "周一",
    value: 1,
  },
  {
    key: 2,
    label: "周二",
    value: 2,
  },
  {
    key: 3,
    label: "周三",
    value: 3,
  },
  {
    key: 4,
    label: "周四",
    value: 4,
  },
  {
    key: 5,
    label: "周五",
    value: 5,
  },
  {
    key: 6,
    label: "周六",
    value: 6,
  },
  {
    key: 7,
    label: "周日",
    value: 7,
  },
]);
const defaultProps = {
  children: "children",
  label: "label",
};
let bgcShow = false;
let addDevice = () => {
  console.log("-=-=");
  showAddDeviceDialog.value = true;
};
let close = () => {
  console.log("主页面guanbi");
  showAddDeviceDialog.value = false;
};
let total = ref(1);
let tableItem = ref([
  {
    prop: "date",
    label: "策略名称",
  },
  {
    prop: "date",
    label: "策略类型",
  },
  {
    prop: "date",
    label: "计划类型",
  },
  {
    prop: "date",
    label: "周期使能",
  },

  {
    prop: "date",
    label: "创建时间",
  },
  {
    prop: "date",
    label: "执行操作",
  },

  {
    prop: "date",
    label: "操作",
  },
]);

const tableData = [
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },

  {
    date: "基波电压(V)",

    name: "基波电流",
  },
];
let getList = () => {};
let handleNodeClick = (e) => {
  showDialog.value = true;
};
let handleAdd = () => {
  addDialog.value = true;
};
let save = () => {
  console.log("主页面确定-=-123");
};
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.routing-inspection {
  width: 100%;
  margin-top: 9px;
  display: flex;
  :deep(.el-time-spinner__item) {
    background-color: #fff;
    color: #fff;
  }
  .dialog-add-content {
    padding-right: 20px;
    padding-top: 20px;
    /* padding-left: 10px; */
    :deep(.el-row) {
      margin-top: 10px;
    }
    :deep(.el-input-number.el-slider__input) {
      width: 120px;
    }
    :deep(.el-form-item) {
      width: 100%;
    }
    :deep(.el-col.el-col-12) {
      display: flex;
      align-items: center;
    }
    :deep(.center-align) {
      display: flex;
      align-items: center;
    }

    .slider {
      width: 100%;
      padding-left: 20px;
      :deep(.el-slider__button) {
        width: 15px;
        height: 15px;
      }
      :deep(.el-icon) {
        svg {
          color: #fff;
        }
      }
      :deep(.el-input-number .el-input__wrapper) {
        background-color: #044483;
        border: 1px solid #61c8ff;
      }
      :deep(.el-input-number__decrease) {
        background-color: #044483;
        border: none;
        border-right: 1px solid #61c8ff;
      }
      :deep(.el-input-number__increase) {
        background-color: #044483;
        border: none;
        border-left: 1px solid #61c8ff;
      }
      :deep(.el-input__inner) {
        background-color: #044483;
      }
      :deep(.el-input-number.el-slider__input) {
        background-color: #044483;
        border: none;
        /* border: 1px solid #61c8ff; */
      }
    }

    .week-wrap {
      margin-left: 20px;
      :deep(.el-checkbox__label) {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
      }
      :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
        background-color: transparent;
      }
      :deep(.el-checkbox__inner) {
        background-color: transparent;

        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
      }
    }

    :deep(.el-form-item__label) {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 20px;
      color: #ffffff;
    }
    :deep(.el-radio-group) {
      margin-left: 30px;
    }
    .add-device-wrap {
      background-color: #022b58;
      padding: 0px 12px 20px 12px;

      .ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 0px 0px 0px;

        max-height: 210px;
        overflow: auto;
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          align-self: flex-start;
          width: 472px;
          height: 30px;
          background: #0f416f;
          border: 1px solid #61c8ff;
          padding: 0 14px 0 16px;
          margin-top: 20px;
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
          }
          img {
            width: 19px;
            height: 19px;
            cursor: pointer;
          }
        }
      }
      .add-device {
        height: 35px;
        background: #012752;
        border: 1px solid #61c8ff;
        margin-top: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;

        font-size: 16px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
  .main-content {
    display: flex;
    width: 100%;
    flex-direction: column;

    flex-shrink: 0;
    .content-wrap {
      height: calc(100vh - 168px - 9px);
      background-color: #022552;
      width: 100%;
      padding-top: 19px;
      padding-left: 15px;
      padding-right: 21px;
      .table-data {
        height: 634px;
        margin-top: 20px;
        width: 1590px;
        .btn-wrap {
          display: flex;
          justify-content: center;
        }
        .detail {
          min-width: 73px;
          height: 30px;
          background: rgba(4, 68, 131, 0.64);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          line-height: 0px;
          color: #fffefe;
          cursor: pointer;
        }
        .table-height {
          height: 634px;
          width: 1590px;
        }
        /* :deep(.el-table__header thead) {
          background: url("./images/table-header-bgc.png") no-repeat;
          background-size: 100% 100%;
          width: 100%;
        } */
        /* :deep(.el-table__header thead) {
          background: url("./images/table-header-bgc.png") no-repeat;
          background-size: 100% 100%;
       
          width: 100%;
        } */
        :deep(.el-table__row) {
          height: 56px !important;
          background-color: #022552 !important;

          .cell {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #fefefe;
          }
        }
      }
      .pagination {
        padding-right: 10px;
        padding-top: 6px;
      }
      .search-wrap {
        padding-left: 32px;
        padding-top: 8px;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
        }

        .sel-width {
          width: 220px;
        }
        .del-btn {
          display: flex;
          align-items: center;
          width: 81px;
          height: 35px;
          background: rgba(133, 18, 20, 0.4);
          border: 1px solid #ff2222;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          padding-left: 11px;
          margin-left: 17px;
          img {
            width: 15px;
            height: 17px;
            margin-right: 7px;
          }
        }
        .btn-wrap {
          display: flex;
          align-items: center;
          button {
            cursor: pointer;
          }
          span {
            margin-left: 4px;
          }
          .edit {
            display: flex;
            margin-left: 15px;
            justify-content: center;
            min-width: 81px;
            display: flex;
            justify-content: center;
            align-items: center;

            height: 35px;
            background: rgba(255, 218, 28, 0.4);
            border: 1px solid #ffda1c;

            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #fefefe;
          }
          .del {
            min-width: 81px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(133, 18, 20, 0.4);
            border: 1px solid #ff2222;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #fefefe;
            margin-left: 15px;
          }
          .add {
            min-width: 81px;
            height: 35px;
            background: rgba(31, 144, 12, 0.4);
            border: 1px solid #06ff34;
            margin-left: 48px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        :deep(.el-col.el-col-1.is-guttered) {
          padding-left: 0px !important;
        }
        :deep(.el-date-editor) {
          width: 300px !important;
        }

        :deep(.el-form-item) {
          margin-bottom: 0px;
        }
        :deep(.el-button) {
          width: 84px;
          height: 35px;
          background: rgba(27, 168, 255, 0.35);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          border-radius: 0px;

          svg {
            width: 50px !important;
            height: 17px !important;
          }
        }
      }
    }
  }
}
</style>
